<template>
  <div class="rank-container">
    <div class="rank-header">
      <h1 class="rank-title">巅峰排位</h1>
    </div>

    <!-- 视图切换器 -->
    <div class="view-switch-container">
      <el-radio-group v-model="activeView" size="large">
        <el-radio-button label="playerRank">玩家排行</el-radio-button>
        <el-radio-button label="petWinRate">精灵胜率</el-radio-button>
      </el-radio-group>
    </div>
    
    <!-- 玩家排行视图 -->
    <div v-if="activeView === 'playerRank'">
      <!-- 添加当前玩家信息卡片 -->
      <div class="player-info-card">
        <div class="card-header">
          <h2>我的排名</h2>
          <div class="card-actions">
            <el-button type="primary" size="small" @click="showBattleRecords">对战记录</el-button>
            <el-button type="primary" size="small" icon="Refresh" circle @click="refreshRanking"></el-button>
          </div>
        </div>
        <div class="card-content">
          <div class="player-info-item">
            <span class="info-label">排名</span>
            <span class="info-value">
              <span class="rank-badge" :class="myRankClass">{{ currentPlayer.rank || '未上榜' }}</span>
            </span>
          </div>
          <div class="player-info-item">
            <span class="info-label">昵称</span>
            <span class="info-value">{{ currentPlayer.nick || '未登录' }}</span>
          </div>
          <div class="player-info-item">
            <span class="info-label">米米号</span>
            <span class="info-value">{{ currentPlayer.userid || '-' }}</span>
          </div>
          <div class="player-info-item">
            <span class="info-label">排位分</span>
            <span class="info-value monKingWin">{{ currentPlayer.monKingWin || 0 }}</span>
          </div>
        </div>
      </div>
      
      <!-- 领奖台展示前三名 -->
      <div class="podium-container" v-if="topThree.length > 0">
        <div class="podium-title">排行榜前三名</div>
        <div class="game-podium-wrapper">
          <!-- 第二名 -->
          <div class="podium-item second-place" v-if="topThree[1]">
            <div class="medal-icon silver-medal">
              <img src="@/assets/images/rank/silver-medal.png" alt="第二名" />
            </div>
            <div class="player-avatar">
              <img :src="`https://robohash.org/${topThree[1].userid}.png`" alt="玩家头像" />
            </div>
            <div class="player-info">
              <div class="player-nick">{{ topThree[1].nick }}</div>
              <div class="score-box silver">
                <span class="score-value">{{ topThree[1].monKingWin }}</span>
              </div>
            </div>
          </div>
          
          <!-- 第一名 -->
          <div class="podium-item first-place" v-if="topThree[0]">
            <div class="crown-icon">
              <img src="@/assets/images/rank/crown.png" alt="皇冠" />
            </div>
            <div class="player-avatar champion">
              <img :src="`https://robohash.org/${topThree[0].userid}.png`"  alt="冠军头像" />
            </div>
            <div class="player-info">
              <div class="player-nick champion">{{ topThree[0].nick }}</div>
              <div class="score-box gold">
                <span class="score-value">{{ topThree[0].monKingWin }}</span>
              </div>
            </div>
          </div>
          
          <!-- 第三名 -->
          <div class="podium-item third-place" v-if="topThree[2]">
            <div class="medal-icon bronze-medal">
              <img src="@/assets/images/rank/bronze-medal.png" alt="第三名" />
            </div>
            <div class="player-avatar">
              <img :src="`https://robohash.org/${topThree[2].userid}.png`"  alt="玩家头像" />
            </div>
            <div class="player-info">
              <div class="player-nick">{{ topThree[2].nick }}</div>
              <div class="score-box bronze">
                <span class="score-value">{{ topThree[2].monKingWin }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="podium-base-wrapper">
          <div class="podium-base second"></div>
          <div class="podium-base first"></div>
          <div class="podium-base third"></div>
        </div>
      </div>
      
      <div class="rank-table-wrapper">
        <el-table
          :data="restRankData"
          stripe
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="rank" label="排名" :width="isMobile ? 50 : 80" align="center">
            <template #default="scope">
              <div class="rank-cell">
                <div 
                  :class="['rank-number', 
                    scope.row.rank === 1 ? 'gold' : 
                    scope.row.rank === 2 ? 'silver' : 
                    scope.row.rank === 3 ? 'bronze' : '']"
                >
                  {{ scope.row.rank }}
                </div>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="nick" label="昵称" :min-width="isMobile ? 70 : 120">
            <template #default="scope">
              <div class="nick-cell">
                <span class="nick" :title="scope.row.nick">
                  {{ isMobile && scope.row.nick.length > 5 ? scope.row.nick.substring(0, 5) + '...' : scope.row.nick }}
                </span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="userid" label="米米号" :min-width="isMobile ? 70 : 120" align="center" />
          
          <el-table-column prop="monKingWin" label="排位分" :min-width="isMobile ? 50 : 100" align="center">
            <template #default="scope">
              <div class="monKingWin-cell">
                <span class="monKingWin">{{ scope.row.monKingWin }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 精灵胜率视图 -->
    <div v-if="activeView === 'petWinRate'">
      <!-- 精灵胜率榜 -->
      <div class="pet-win-rate-container">
        <div class="section-header">
          <h2 class="section-title">精灵胜率榜</h2>
          <div class="filter-controls">
            <input 
              type="month" 
              v-model="selectedMonth" 
              @change="onMonthChange"
              class="native-month-picker"
            />
            <select 
              v-model="selectedWeek" 
              @change="onWeekChange"
              class="native-select"
            >
              <option value="">选择周</option>
              <option 
                v-for="week in weekOptions" 
                :key="week.value" 
                :value="week.value"
                :title="`${week.startDate} - ${week.endDate}`"
              >
                {{ week.label }}
              </option>
            </select>
            <el-button type="primary" size="small" icon="Refresh" circle @click="refreshPetWinRateData" :loading="petWinRateLoading"></el-button>
          </div>
        </div>
        <el-table
          v-loading="petWinRateLoading"
          :data="petWinRateData"
          stripe
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
        >
          <el-table-column label="排名" :width="isMobile ? 50 : 80" align="center">
            <template #default="scope">
              <div class="rank-cell">
                <div 
                  :class="['rank-number', 
                    scope.$index + 1 === 1 ? 'gold' : 
                    scope.$index + 1 === 2 ? 'silver' : 
                    scope.$index + 1 === 3 ? 'bronze' : '']"
                >
                  {{ scope.$index + 1 }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="精灵名称" :min-width="isMobile ? 80 : 120">
            <template #default="scope">
              <span :title="findNameById(scope.row.pet_id)">
                {{ findNameById(scope.row.pet_id) }}
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="appearanceCount" label="出场次数" :min-width="isMobile ? 60 : 100" align="center" /> -->
          <el-table-column prop="usageRate" label="使用率" :min-width="isMobile ? 60 : 100" align="center" sortable>
            <template #default="scope">
              <span>{{ scope.row.usageRate.toFixed(2)}}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="winRate" label="胜率" :min-width="isMobile ? 60 : 100" align="center" sortable>
            <template #default="scope">
              <span>{{ scope.row.winRate.toFixed(2) }}%</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="!petWinRateLoading && petWinRateData.length === 0" class="no-data-placeholder">
          暂无精灵胜率数据
        </div>
      </div>
    </div>

    <!-- 对战记录对话框 -->
    <el-dialog
      v-model="battleRecordsVisible"
      title="对战记录"
      width="80%"
      :before-close="handleCloseDialog"
      :close-on-click-modal="false"
    >
      <div v-loading="battleRecordsLoading" class="battle-records-container">
        <div v-if="battleRecords.length === 0 && !battleRecordsLoading" class="no-records">
          暂无对战记录
        </div>
        <div v-else class="battle-records-list">
          <div v-for="(record, index) in battleRecords" :key="index" class="battle-record-item"
               :class="{
                 'escape': isEscaped(record),
                 'escape-self': isSelfEscape(record),
                 'escape-opponent': isOpponentEscape(record),
                 'win': !isEscaped(record) && isWinner(record),
                 'lose': !isEscaped(record) && !isWinner(record)
               }">
            <div class="record-header">
              <span class="record-time">{{ formatTime(record.createdAt) }}</span>
              <span class="record-result"
                    :class="{
                      'escape-text': isEscaped(record),
                      'win-text': !isEscaped(record) && isWinner(record),
                      'lose-text': !isEscaped(record) && !isWinner(record)
                    }">
                {{ isEscaped(record)
                   ? (isSelfEscape(record) ? '我方逃跑' : '对方逃跑')
                   : (isWinner(record) ? '胜利' : '失败') }}
              </span>
            </div>
            <div class="record-content">
              <div class="players-info">
                <div class="player-side">
                  <div class="player-name">
                    <template v-if="isMobile">
                      我方阵容
                      <div class="player-id">({{ getSelfUserId(record) }})</div>
                    </template>
                    <template v-else>
                      我方（{{ getSelfUserId(record) }}）阵容
                    </template>
                  </div>
                  <div class="player-lineup">
                    <template v-if="record.battleInfo && getSelfLineup(record).length > 0">
                      <span v-for="(petId, idx) in getSelfLineup(record)" :key="idx" class="pet-id">
                        {{ petId }}
                      </span>
                    </template>
                    <span v-else>无阵容信息</span>
                  </div>
                </div>
                <div class="vs-badge">VS</div>
                <div class="player-side">
                  <div class="player-name">
                    <template v-if="isMobile">
                      对方阵容
                      <div class="player-id">({{ getOpponentUserId(record) }})</div>
                    </template>
                    <template v-else>
                      对方（{{ getOpponentUserId(record) }}）阵容
                    </template>
                  </div>
                  <div class="player-lineup">
                    <template v-if="record.battleInfo && getOpponentLineup(record).length > 0">
                      <span v-for="(petId, idx) in getOpponentLineup(record)" :key="idx" class="pet-id">
                        {{ petId }}
                      </span>
                    </template>
                    <span v-else>无阵容信息</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 添加分页控制 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalRecords"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { fetchRankingData, fetchBattleRecordData, fetchPetWinRateData } from '@/api/rank';
import { ElLoading, ElMessage } from 'element-plus'; 
import mapping from '@/utils/items_and_pets.json'

// 控制当前显示的视图
const activeView = ref('playerRank'); // 'playerRank' 或 'petWinRate'

// 检测是否为移动设备
const isMobile = ref(window.innerWidth <= 768);

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768;
});

// 为移动设备设置更紧凑的表头样式
const headerCellStyle = computed(() => {
  return {
    background: '#f5f7fa',
    color: '#333',
    padding: isMobile.value ? '8px 2px' : '12px 8px',
    fontSize: isMobile.value ? '14px' : '16px'
  };
});

// 为移动设备设置更紧凑的单元格样式
const cellStyle = computed(() => {
  return {
    padding: isMobile.value ? '8px 2px' : '16px 8px',
    fontSize: isMobile.value ? '13px' : '14px'
  };
});

// 模拟排行榜数据
const rankData = ref([]);
// 添加当前玩家信息
const currentPlayer = ref({});

// 精灵胜率相关数据
const petWinRateData = ref([]);
const petWinRateLoading = ref(false);

// 计算上周对应的月份和第几周
const getLastWeekInfo = () => {
  const today = new Date();
  const lastWeek = new Date(today);
  lastWeek.setDate(today.getDate() - 7); // 上周的同一天
  
  // 找到上周的周一
  const lastWeekMonday = new Date(lastWeek);
  const dayOfWeek = lastWeekMonday.getDay();
  const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 周日是0，需要特殊处理
  lastWeekMonday.setDate(lastWeekMonday.getDate() - daysToMonday);
  
  // 上周周一所在的月份
  const weekMonth = lastWeekMonday.toISOString().slice(0, 7);
  
  // 计算上周是该月的第几周
  const [year, month] = weekMonth.split('-').map(Number);
  const firstDayOfMonth = new Date(year, month - 1, 1);
  
  // 找到该月第一个周一
  let firstMonday = new Date(firstDayOfMonth);
  while (firstMonday.getDay() !== 1) {
    firstMonday.setDate(firstMonday.getDate() - 1);
  }
  if (firstMonday.getMonth() !== month - 1) {
    firstMonday.setDate(firstMonday.getDate() + 7);
  }
  
  // 计算周数
  let weekNumber = 1;
  let currentMonday = new Date(firstMonday);
  
  while (currentMonday.getTime() < lastWeekMonday.getTime()) {
    currentMonday.setDate(currentMonday.getDate() + 7);
    weekNumber++;
  }
  
  // 如果currentMonday正好等于lastWeekMonday，说明找到了对应的周
  // 如果currentMonday超过了lastWeekMonday，说明上一个weekNumber是正确的
  if (currentMonday.getTime() > lastWeekMonday.getTime()) {
    weekNumber--;
  }
  
  return {
    month: weekMonth,
    week: weekNumber
  };
};

// 获取上周信息并初始化选择器
const lastWeekInfo = getLastWeekInfo();

// 月份和周选择器
const selectedMonth = ref(lastWeekInfo.month); // 默认上周对应的月份
const selectedWeek = ref(lastWeekInfo.week); // 默认上周是第几周

// 计算指定月份的周数选项
const getWeeksInMonth = (yearMonth) => {
  if (!yearMonth) return [];
  
  const [year, month] = yearMonth.split('-').map(Number);
  const weeks = [];
  
  // 获取该月第一天和最后一天
  const firstDay = new Date(year, month - 1, 1);
  const lastDay = new Date(year, month, 0);
  
  let weekCount = 1;
  let currentDate = new Date(firstDay);
  
  // 找到第一个周一
  while (currentDate.getDay() !== 1) {
    currentDate.setDate(currentDate.getDate() - 1);
  }
  
  // 如果第一个周一不在当前月，则从下一个周一开始
  if (currentDate.getMonth() !== month - 1) {
    currentDate.setDate(currentDate.getDate() + 7);
  }
  
  // 计算每一周
  while (currentDate <= lastDay) {
    const weekStart = new Date(currentDate);
    const weekEnd = new Date(currentDate);
    weekEnd.setDate(weekEnd.getDate() + 6);
    
    // 如果这一周的周一在当前月份内，则算作当前月份的周
    if (weekStart.getMonth() === month - 1) {
      weeks.push({
        value: weekCount,
        label: `第${weekCount}周`,
        startDate: weekStart.toLocaleDateString(),
        endDate: weekEnd.toLocaleDateString()
      });
      weekCount++;
    }
    
    currentDate.setDate(currentDate.getDate() + 7);
  }
  
  return weeks;
};

// 当前月份的周数选项
const weekOptions = computed(() => {
  return getWeeksInMonth(selectedMonth.value);
});

// 计算前三名和剩余排名数据
const topThree = computed(() => {
  return rankData.value.slice(0, 3);
});

const restRankData = computed(() => {
  return rankData.value.slice(3);
});

// 设置行的样式，为前三名添加特殊样式
const tableRowClassName = ({ row, rowIndex }) => {
  // 由于前三名已经单独展示，这里不再需要特殊样式
  return '';
};

// 加载排行榜数据函数
const loadRankingData = async () => {
  // 显示全屏loading
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '加载排行榜数据中...',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  
  try {
    const res = await fetchRankingData();
    if (res.code === 200) {
      rankData.value = res.data.rankList;
      currentPlayer.value = res.data.userRank || {};
      ElMessage.success('排行榜数据加载成功');
    } else {
      ElMessage.warning(res.message || '获取排行榜数据失败');
    }
  } catch (error) {
    console.error('加载排行榜失败:', error);
    ElMessage.error('加载失败，请稍后重试');
  } finally {
    // 关闭loading
    loadingInstance.close();
  }
};

// 月份选择器变化处理
const onMonthChange = () => {
  // 月份变化时重置周选择
  selectedWeek.value = '';
  console.log('月份已选择:', selectedMonth.value);
  console.log('该月份可选周数:', weekOptions.value.length);
};

// 周选择器变化处理
const onWeekChange = () => {
  // 确保周的值是数字类型
  if (selectedWeek.value !== '') {
    selectedWeek.value = Number(selectedWeek.value);
  }
  // 只有选择周后才重新加载数据
  loadPetWinRateData();
};

// 加载精灵胜率数据函数
const loadPetWinRateData = async () => {
  petWinRateLoading.value = true;
  try {
    // weekMonth参数：选择的月份（YYYY-MM格式）
    const weekMonth = selectedMonth.value || null;
    
    // weekNumberInMonth参数：该月份中的第几周
    const weekNumberInMonth = selectedWeek.value === '' ? null : Number(selectedWeek.value);
    
    const res = await fetchPetWinRateData(weekMonth, weekNumberInMonth); 
    if (res.code === 200) {
      // 按胜率降序，出场次数降序排序
      petWinRateData.value = (res.data.petRank || []).sort((a, b) => {
        if (b.winRate !== a.winRate) {
          return b.winRate - a.winRate;
        }
        return b.appearanceCount - a.appearanceCount;
      });
      if (petWinRateData.value.length === 0) {
        ElMessage.info('暂无精灵胜率数据');
      } else {
        ElMessage.success('精灵胜率数据加载成功');
      }
    } else {
      ElMessage.warning(res.message || '获取精灵胜率数据失败');
    }
  } catch (error) {
    console.error('加载精灵胜率数据失败:', error);
    ElMessage.error('加载精灵胜率数据失败，请稍后重试');
  } finally {
    petWinRateLoading.value = false;
  }
};

onMounted(async () => {
  await loadRankingData();
  await loadPetWinRateData(); // 同时加载精灵胜率数据
});

// 根据排名设置不同样式
const myRankClass = computed(() => {
  const rank = currentPlayer.value.rank;
  if (!rank || rank > 100) return '';
  if (rank === 1) return 'gold';
  if (rank === 2) return 'silver';
  if (rank === 3) return 'bronze';
  if (rank <= 10) return 'top10';
  if (rank <= 50) return 'top50';
  return 'top100';
});

// 刷新排行榜
const refreshRanking = async () => {
  await loadRankingData();
  // Optionally, refresh pet win rate data as well, or keep it separate
  // await loadPetWinRateData(); 
};

// 单独刷新精灵胜率数据
const refreshPetWinRateData = async () => {
  await loadPetWinRateData();
};

// 对战记录相关数据
const battleRecordsVisible = ref(false);
const battleRecordsLoading = ref(false);
const battleRecords = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalRecords = ref(0);

// 显示对战记录弹窗
const showBattleRecords = async () => {
  battleRecordsVisible.value = true;
  currentPage.value = 1; // 重置页码
  await loadBattleRecords();
};

// 加载对战记录数据
const loadBattleRecords = async () => {
  battleRecordsLoading.value = true;
  try {
    const res = await fetchBattleRecordData(currentPage.value, pageSize.value);
    if (res.code === 200) {
      battleRecords.value = res.data.list || [];
      totalRecords.value = res.data.totalCount || 0;
      if (battleRecords.value.length === 0) {
        ElMessage.info('暂无对战记录');
      }
    } else {
      ElMessage.warning(res.message || '获取对战记录失败');
    }
  } catch (error) {
    console.error('加载对战记录失败:', error);
    ElMessage.error('加载对战记录失败，请稍后重试');
  } finally {
    battleRecordsLoading.value = false;
  }
};

// 分页处理函数
const handleSizeChange = (size) => {
  pageSize.value = size;
  loadBattleRecords();
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  loadBattleRecords();
};

// 关闭对话框
const handleCloseDialog = () => {
  battleRecordsVisible.value = false;
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return '-';
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 判断当前用户是否为胜利者
const isWinner = (record) => {
  if (!record.battleInfo) return false;
  
  try {
    const battleInfo = JSON.parse(record.battleInfo);
    if (!battleInfo || battleInfo.length < 2) return false;
    
    // 获取当前用户信息
    const currentUserId = currentPlayer.value.userid;
    
    // 检查atktimes值判断胜利者
    if (battleInfo[0].atktimes === currentUserId) {
      return true; // 当前用户是胜利者
    } else if (battleInfo[0].atktimes === 1) {
      return battleInfo[0].userid === currentUserId; // 用户1逃跑，当前用户是用户2则获胜
    } else if (battleInfo[0].atktimes === 2) {
      return battleInfo[1].userid === currentUserId; // 用户2逃跑，当前用户是用户1则获胜
    }
    
    return false;
  } catch (error) {
    console.error('解析对战记录失败:', error);
    return false;
  }
};

// 判断是否为逃跑情况
const isEscaped = (record) => {
  if (!record.battleInfo) return false;
  try {
    const info = JSON.parse(record.battleInfo);
    const code = info[0].atktimes;
    return code === 1 || code === 2;
  } catch {
    return false;
  }
};

// 是否我方逃跑
const isSelfEscape = (record) => {
  if (!isEscaped(record)) return false;
  const info = JSON.parse(record.battleInfo);
  const uid = currentPlayer.value.userid;
  const code = info[0].atktimes;
  if (code === 1) return info[0].userid === uid;
  if (code === 2) return info[1].userid === uid;
  return false;
};

// 是否对方逃跑
const isOpponentEscape = (record) => {
  if (!isEscaped(record)) return false;
  const info = JSON.parse(record.battleInfo);
  const uid = currentPlayer.value.userid;
  const code = info[0].atktimes;
  if (code === 1) return info[0].userid !== uid;
  if (code === 2) return info[1].userid !== uid;
  return false;
};

const findNameById = (id) => {
  const item = mapping.find((item) => item.id === id);
  return item ? item.name : '未知';
};


// 获取自己的阵容
const getSelfLineup = (record) => {
  if (!record.battleInfo) return [];
  try {
    const info = JSON.parse(record.battleInfo);
    const uid = currentPlayer.value.userid;
    const self = info.find(item => item.userid === uid);

    return self ? self.action.map(item => findNameById(item)) : [];

  } catch (error) {
    console.error('解析阵容失败:', error);
    return [];
  }
};


// 获取对手的阵容
const getOpponentLineup = (record) => {
  if (!record.battleInfo) return [];
  try {
    const info = JSON.parse(record.battleInfo);
    const uid = currentPlayer.value.userid;
    // 确保 info 是一个数组并且至少有一个元素不是当前用户
    const opp = Array.isArray(info) ? info.find(item => item && item.userid !== uid) : null;
    return opp && Array.isArray(opp.action) ? opp.action.map(item => findNameById(item)) : [];
  } catch (error) {
    console.error('解析阵容失败:', error);
    return [];
  }
};

// 获取自己的米米号
const getSelfUserId = (record) => {
  if (!record.battleInfo) return '-';
  try {
    const info = JSON.parse(record.battleInfo);
    const uid = currentPlayer.value.userid;
    const self = info.find(item => item.userid === uid);
    return self ? self.userid : '-';
  } catch (error) {
    console.error('获取米米号失败:', error);
    return '-';
  }
};

// 获取对手的米米号
const getOpponentUserId = (record) => {
  if (!record.battleInfo) return '-';
  try {
    const info = JSON.parse(record.battleInfo);
    const uid = currentPlayer.value.userid;
    const opp = info.find(item => item.userid !== uid);
    return opp ? opp.userid : '-';
  } catch (error) {
    console.error('获取米米号失败:', error);
    return '-';
  }
};
</script>

<style lang="scss" scoped>
.rank-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  
  @media screen and (max-width: 768px) {
    padding: 10px 8px;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

.rank-header {
  margin-bottom: 16px;  // 减小与玩家信息卡片的间距
  text-align: center;
  
  @media screen and (max-width: 768px) {
    margin-bottom: 12px;
  }
}

.rank-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0;
  
  @media screen and (max-width: 768px) {
    font-size: 20px;
  }
}

// 添加玩家信息卡片样式
.player-info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  padding: 16px 20px;
  
  @media screen and (max-width: 768px) {
    margin-bottom: 16px;
    padding: 10px 12px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    @media screen and (max-width: 768px) {
      margin-bottom: 10px;
    }
    
    h2 {
      font-size: 18px;
      margin: 0;
      color: #333;
      
      @media screen and (max-width: 768px) {
        font-size: 16px;
      }
    }
    
    .card-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      
      @media screen and (max-width: 768px) {
        gap: 5px;
      }
    }
  }
  
  .card-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    
    @media screen and (max-width: 768px) {
      gap: 8px;
    }
    
    @media screen and (max-width: 480px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
  }
  
  .player-info-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    
    @media screen and (max-width: 768px) {
      min-width: 0;
      flex-basis: calc(50% - 8px);
    }
    
    .info-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 8px;
      
      @media screen and (max-width: 768px) {
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
    
    .info-value {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      
      @media screen and (max-width: 768px) {
        font-size: 14px;
      }
      
      &.monKingWin {
        color: #1890ff;
      }
    }
    
    .rank-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 16px;
      background: #f0f0f0;
      font-weight: bold;
      
      @media screen and (max-width: 768px) {
        padding: 2px 8px;
        font-size: 12px;
        border-radius: 12px;
      }
      
      &.gold {
        background: linear-gradient(135deg, #ffd700, #f0c14b);
        color: #fff;
      }
      
      &.silver {
        background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
        color: #fff;
      }
      
      &.bronze {
        background: linear-gradient(135deg, #cd7f32, #df9a57);
        color: #fff;
      }
      
      &.top10 {
        background: linear-gradient(135deg, #67c23a, #95d475);
        color: #fff;
      }
      
      &.top50 {
        background: linear-gradient(135deg, #409eff, #79bbff);
        color: #fff;
      }
      
      &.top100 {
        background: linear-gradient(135deg, #909399, #c8c9cc);
        color: #fff;
      }
    }
  }
  
  @media screen and (max-width: 768px) {
    padding: 12px 15px;
    
    .card-header h2 {
      font-size: 16px;
    }
    
    .player-info-item {
      .info-label {
        font-size: 13px;
        margin-bottom: 4px;
      }
      
      .info-value {
        font-size: 15px;
      }
      
      .rank-badge {
        padding: 2px 8px;
        font-size: 14px;
      }
    }
  }
}

.rank-table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  @media screen and (max-width: 768px) {
    border-radius: 6px;
    overflow-x: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

:deep(.el-table) {
  --el-table-border-color: #e0e0e0;
  --el-table-header-bg-color: #f5f7fa;
  --el-table-row-hover-bg-color: #f5f7fa;
  
  th {
    font-weight: bold;
    padding: 12px 0;
  }
  
  td {
    padding: 16px 0;
  }
  
  @media screen and (max-width: 768px) {
    // 移动端表格样式调整
    --el-table-header-text-color: #333;
    --el-table-text-color: #606266;
    font-size: 12px;
    
    .el-table__header-wrapper {
      th {
        padding: 6px 0;
        font-size: 12px;
      }
    }
    
    .el-table__body-wrapper {
      td {
        padding: 6px 0;
        font-size: 12px;
      }
    }
    
    // 强制表格在手机上铺满宽度
    width: 100% !important;
    table {
      width: 100% !important;
    }
    
    .cell {
      padding: 0 2px;
    }
  }
}

:deep(.gold-row) {
  background-color: rgba(255, 215, 0, 0.05);
}

:deep(.silver-row) {
  background-color: rgba(192, 192, 192, 0.05);
}

:deep(.bronze-row) {
  background-color: rgba(205, 127, 50, 0.05);
}

.rank-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: bold;
  background-color: #e0e0e0;
  
  &.gold {
    background: linear-gradient(135deg, #ffd700, #f0c14b);
    color: #fff;
  }
  
  &.silver {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
    color: #fff;
  }
  
  &.bronze {
    background: linear-gradient(135deg, #cd7f32, #df9a57);
    color: #fff;
  }
  
  @media screen and (max-width: 768px) {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

// 优化对话框样式
:deep(.el-dialog) {
  display: flex;
  flex-direction: column;
  max-height: 80vh; // 设置最大高度为视口高度的80%
  margin: 0 auto !important; // 水平居中
  position: fixed !important; // 固定定位，防止页面滚动影响弹窗位置
  top: 50% !important; // 垂直居中
  left: 50% !important; // 水平居中
  transform: translate(-50%, -50%) !important; // 确保完全居中
  
  .el-dialog__header {
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .el-dialog__body {
    flex: 1; // 自动占用剩余空间
    overflow: hidden; // 避免内容溢出
    display: flex;
    flex-direction: column;
    padding: 0; // 移除默认内边距，由内部元素控制
  }
  
  .el-dialog__close {
    font-weight: bold;
  }
  
  @media screen and (max-width: 768px) {
    width: 96% !important; // 增加移动端宽度，基本占满屏幕
    max-height: 95vh; // 增加移动端高度，基本占满屏幕
    
    .el-dialog__header {
      padding: 12px 15px;
    }
  }
}

// 重新设计对战记录容器
.battle-records-container {
  display: flex;
  flex-direction: column;
  height: 100%; // 占满对话框内容区域
  
  .battle-records-list {
    flex: 1; // 占用剩余空间
    overflow-y: auto; // 允许垂直滚动
    padding: 15px 20px;
    
    @media screen and (max-width: 768px) {
      padding: 10px 12px;
    }
  }
  
  .no-records {
    padding: 20px;
    text-align: center;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 16px;
  }
  
  // 添加分页容器样式
  .pagination-container {
    border-top: 1px solid #e0e0e0;
    padding: 15px 0;
    margin-top: 0; // 移除上边距
    background: #fff;
    display: flex;
    justify-content: center;
    
    @media screen and (max-width: 768px) {
      padding: 10px 0;
      // ...existing code...
    }
  }
  
  // ...existing code...
}

.nick-cell {
  display: flex;
  align-items: center;
  
  @media screen and (max-width: 768px) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.nick {
  font-weight: 500;
  cursor: default;
  
  @media screen and (max-width: 768px) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

.monKingWin-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.monKingWin {
  font-weight: 600;
  color: #1890ff;
}

@media screen and (max-width: 480px) {
  :deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: inherit;
  }
  
  :deep(.el-table .cell) {
    padding-left: 1px;
    padding-right: 1px;
    line-height: 1.1;
  }
  
  :deep(.el-table th > .cell) {
    padding-left: 1px;
    padding-right: 1px;
    white-space: nowrap;
  }
  
  // 强制表格在手机上铺满宽度
  :deep(table) {
    width: 100% !important;
    table-layout: fixed;
  }
  
  :deep(.el-table__header) {
    width: 100% !important;
  }
  
  :deep(.el-table__body) {
    width: 100% !important;
  }
  
  :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
  
  :deep(.el-table__header-wrapper) {
    overflow-x: auto;
  }
  
  :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
  
  :deep(.el-table__header-wrapper) {
    overflow-x: auto;
  }
}

// 游戏风格领奖台样式
.podium-container {
  margin-bottom: 30px;
  background: linear-gradient(to bottom, #6cc7ff, #97deff);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 20px;
  position: relative;
  overflow: hidden;
  
  @media screen and (max-width: 768px) {
    padding: 12px 8px;
    margin-bottom: 16px;
  }
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
  }
  
  .podium-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    
    @media screen and (max-width: 768px) {
      font-size: 18px;
      margin-bottom: 12px;
    }
  }
  
  .game-podium-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 220px;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
    
    @media screen and (max-width: 768px) {
      min-height: 150px;
      margin-bottom: 20px;
    }
  }
  
  .podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 15px;
    
    @media screen and (max-width: 768px) {
      padding: 0 6px;
    }
    
    &.first-place {
      z-index: 3;
      margin-bottom: 20px;
      
      @media screen and (max-width: 768px) {
        margin-bottom: 10px;
      }
    }
    
    &.second-place {
      z-index: 2;
      align-self: flex-start;
      margin-top: 40px;
      
      @media screen and (max-width: 768px) {
        margin-top: 30px;
      }
    }
    
    &.third-place {
      z-index: 1;
      align-self: flex-start;
      margin-top: 60px;
      
      @media screen and (max-width: 768px) {
        margin-top: 45px;
      }
    }
  }
  
  .crown-icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    
    @media screen and (max-width: 768px) {
      width: 40px;
      height: 30px;
      top: -25px;
    }
    
    img {
      width: 100%;
      height: auto;
      animation: floatAnimation 2s ease-in-out infinite alternate;
    }
  }
  
  .medal-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    
    @media screen and (max-width: 768px) {
      width: 30px;
      height: 30px;
      top: -15px;
    }
    
    img {
      width: 100%;
      height: auto;
    }
    
    &.silver-medal img {
      filter: drop-shadow(0 0 5px rgba(192, 192, 192, 0.8));
    }
    
    &.bronze-medal img {
      filter: drop-shadow(0 0 5px rgba(205, 127, 50, 0.8));
    }
  }
  
  .player-avatar {
    margin-bottom: 10px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    
    @media screen and (max-width: 768px) {
      width: 50px;
      height: 50px;
      border-width: 2px;
      margin-bottom: 6px;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    &.champion {
      width: 100px;
      height: 100px;
      border: 4px solid #ffd700;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
      animation: pulseChampion 2s infinite alternate;
      
      @media screen and (max-width: 768px) {
        width: 65px;
        height: 65px;
        border-width: 3px;
      }
    }
  }
  
  .player-info {
    text-align: center;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 120px;
    
    @media screen and (max-width: 768px) {
      max-width: 80px;
      padding: 3px 6px;
      margin-bottom: 5px;
      border-radius: 4px;
    }
    
    .player-nick {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #333;
      
      @media screen and (max-width: 768px) {
        font-size: 11px;
        margin-bottom: 2px;
      }
      
      &.champion {
        color: #8B4513;
        font-size: 16px;
        
        @media screen and (max-width: 768px) {
          font-size: 13px;
        }
      }
    }
  }
  
  .score-box {
    background: #e0e0e0;
    border-radius: 12px;
    padding: 2px 8px;
    display: inline-block;
    min-width: 60px;
    font-weight: bold;
    
    @media screen and (max-width: 768px) {
      min-width: 40px;
      border-radius: 8px;
      padding: 1px 5px;
    }
    
    &.gold {
      background: linear-gradient(135deg, #ffd700, #f0c14b);
      color: #8B4513;
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    }
    
    &.silver {
      background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
      color: #333;
    }
    
    &.bronze {
      background: linear-gradient(135deg, #cd7f32, #df9a57);
      color: #fff;
    }
    
    .score-value {
      font-size: 14px;
      
      @media screen and (max-width: 768px) {
        font-size: 11px;
      }
    }
  }
  
  .podium-base-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 130px;
    position: relative;
    z-index: 1;
    
    @media screen and (max-width: 768px) {
      height: 70px;
    }
  }
  
  .podium-base {
    position: relative;
    width: 100px;
    border-radius: 4px 4px 0 0;
    margin: 0 5px;
    
    @media screen and (max-width: 768px) {
      width: 70px;
      margin: 0 3px;
    }
    
    &:before {
      content: '';
      position: absolute;
      top: -5px;
      left: 0;
      right: 0;
      height: 5px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 4px 4px 0 0;
    }
    
    &.first {
      height: 130px;
      background: linear-gradient(to bottom, #ffd700, #ffd700);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      width: 110px;
      z-index: 3;
      
      @media screen and (max-width: 768px) {
        height: 70px;
        width: 75px;
      }
      
      &:before {
        background: rgba(255, 255, 255, 0.9);
      }
    }
    
    &.second {
      height: 100px;
      background: linear-gradient(to bottom, #c0c0c0, #c0c0c0);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      width: 90px;
      z-index: 2;
      
      @media screen and (max-width: 768px) {
        height: 50px;
        width: 65px;
      }
    }
    
    &.third {
      height: 70px;
      background: linear-gradient(to bottom, #cd7f32, #cd7f32);
      box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
      width: 80px;
      z-index: 1;
      
      @media screen and (max-width: 768px) {
        height: 35px;
        width: 55px;
      }
    }
  }
  
  @media screen and (max-width: 768px) {
    padding: 15px 10px;
    
    .podium-title {
      font-size: 20px;
    }
    
    .game-podium-wrapper {
      min-height: 180px;
    }
    
    .player-avatar {
      width: 60px;
      height: 60px;
      
      &.champion {
        width: 80px;
        height: 80px;
      }
    }
    
    .podium-base {
      width: 80px;
      
      &.first {
        width: 90px;
        height: 70px;
      }
      
      &.second {
        width: 70px;
        height: 55px;
      }
      
      &.third {
        width: 60px;
        height: 40px;
      }
    }
    
    .player-info {
      max-width: 90px;
      
      .player-nick {
        font-size: 12px;
        
        &.champion {
          font-size: 14px;
        }
      }
    }
    
    .score-box .score-value {
      font-size: 12px;
    }
    
    .crown-icon {
      width: 40px;
      height: 30px;
      top: -30px;
    }
    
    .medal-icon {
      width: 30px;
      height: 30px;
      top: -15px;
    }
  }
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes pulseChampion {
  0% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
}

// 添加动画关键帧
@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

@keyframes pulsate {
  0% {
    opacity: 0.8;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

@keyframes shine {
  0% {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.5);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
}

// 对战记录样式
.battle-records-container {
  min-height: 200px;
  
  @media screen and (max-width: 768px) {
    padding: 5px; // 减小移动端内边距
    max-height: 60vh; // 设置最大高度为视口高度的60%
    overflow-y: auto; // 当内容超出时显示垂直滚动条
  }

  .no-records {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #909399;
    font-size: 16px;
  }
  
  .battle-records-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    @media screen and (max-width: 768px) {
      gap: 10px;
    }
  }
  
  .battle-record-item {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    &.win {
      border-left: 4px solid #67c23a;
    }
    
    &.lose {
      border-left: 4px solid #f56c6c;
    }
    
    &.escape {
      border-left: 4px solid #f5a623;
    }
    &.escape-self {
      background: #fff7e6;
    }
    &.escape-opponent {
      background: #e6f7ff;
    }
    
    @media screen and (max-width: 768px) {
      padding: 10px;
      border-left-width: 3px; // 减小边框宽度
    }
    
    .record-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #ebeef5;
      
      @media screen and (max-width: 768px) {
        margin-bottom: 8px;
        padding-bottom: 5px;
        flex-direction: column; // 移动端改为垂直排列
        align-items: flex-start; // 左对齐
        gap: 4px; // 增加一些间距
      }
      
      .record-time {
        color: #909399;
        font-size: 14px;
        
        @media screen and (max-width: 768px) {
          font-size: 12px;
        }
      }
      
      .record-result {
        font-weight: bold;
        font-size: 16px;
        
        &.win-text {
          color: #67c23a;
        }
        
        &.lose-text {
          color: #f56c6c;
        }
        
        &.escape-text {
          color: #f56c6c; // 逃跑也用红色系，或者用 #E6A23C 橙色
        }
        
        @media screen and (max-width: 768px) {
          font-size: 14px;
        }
      }
    }
    
    .record-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: 10px;
        align-items: stretch; // 让子元素宽度撑满
      }
      
      .players-info {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-grow: 1; // 允许其伸展
        
        @media screen and (max-width: 768px) {
          width: 100%;
          justify-content: space-around; // 分散对齐
          gap: 5px; // 减小移动端间距
        }
        
        .player-side {
          text-align: center;
          min-width: 100px;
          flex: 1; // 均匀分配空间
          
          @media screen and (max-width: 768px) {
            min-width: 0; // 移除最小宽度限制
            // flex: 1; // 已在上层设置
          }
          
          .player-name {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
            
            @media screen and (max-width: 768px) {
              font-size: 13px; // 调整字体大小
              margin-bottom: 3px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          
          .player-score {
            color: #606266;
            font-size: 14px;
            
            @media screen and (max-width: 768px) {
              font-size: 12px;
            }
          }
        }
        
        .vs-badge {
          background: #409eff;
          color: white;
          font-weight: bold;
          padding: 2px 10px;
          border-radius: 12px;
          font-size: 14px;
          
          @media screen and (max-width: 768px) {
            padding: 1px 6px; // 调整内边距
            font-size: 11px; // 调整字体大小
            border-radius: 8px; // 调整圆角
          }
        }
      }
      
      .battle-detail {
        .score-change {
          font-weight: bold;
          font-size: 16px;
          
          &.score-up {
            color: #67c23a;
          }
          
          &.score-down {
            color: #f56c6c;
          }
          
          @media screen and (max-width: 768px) {
            font-size: 14px;
            text-align: center;
            width: 100%;
          }
        }
      }
    }
  }
}

// 添加阵容显示样式
.player-lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
  
  @media screen and (max-width: 768px) {
    gap: 3px; // 减小移动端间距
    margin-top: 3px; // 减小移动端上边距
  }
  
  .pet-id {
    background: #eef1f6;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    color: #606266;
    
    @media screen and (max-width: 768px) {
      font-size: 10px; // 调整字体大小
      padding: 1px 4px; // 调整内边距
    }
  }
}

// 添加分页容器样式
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  
  @media screen and (max-width: 768px) {
    margin-top: 15px;
    :deep(.el-pagination) { // 针对移动端分页组件的样式调整
      .el-pagination__sizes {
        margin-right: 5px;
      }
      .el-select {
        width: 80px; // 缩小选择器宽度
      }
      .btn-prev, .btn-next {
        padding: 0 6px; // 缩小按钮内边距
        min-width: auto;
      }
      .el-pager li {
        padding: 0 6px; // 缩小页码内边距
        min-width: auto;
        font-size: 12px;
      }
      .el-pagination__total {
        font-size: 12px; // 调整总数文本大小
        margin-right: 5px;
      }
      .el-pagination__jump {
        margin-left: 5px;
        .el-input {
          width: 40px; // 缩小跳转输入框宽度
        }
      }
    }
  }
}

// 新增精灵胜率榜样式
.pet-win-rate-container {
  margin-top: 0; // 因为现在由 activeView 控制，不再需要独立的 margin-top
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;

  @media screen and (max-width: 768px) {
    padding: 15px 10px;
    margin-top: 20px;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin: 0;

      @media screen and (max-width: 768px) {
        font-size: 18px;
      }
    }
  }
  
  .filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .native-month-picker,
  .native-select {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #606266;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: top;
    display: inline-block;
    
    &:hover {
      border-color: #c0c4cc;
    }
    
    &:focus {
      outline: none;
      border-color: #409eff;
    }
    
    &:disabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
  
  .native-month-picker {
    min-width: 140px;
  }
  
  .native-select {
    min-width: 100px;
  }
  
  .no-data-placeholder {
    text-align: center;
    color: #909399;
    padding: 20px 0;
    font-size: 14px;
  }

  .rank-cell { // 复用之前的样式
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rank-number { // 复用之前的样式
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: bold;
    background-color: #e0e0e0;
    
    &.gold {
      background: linear-gradient(135deg, #ffd700, #f0c14b);
      color: #fff;
    }
    
    &.silver {
      background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
      color: #fff;
    }
    
    &.bronze {
      background: linear-gradient(135deg, #cd7f32, #df9a57);
      color: #fff;
    }
    
    @media screen and (max-width: 768px) {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
  }
}

.view-switch-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  @media screen and (max-width: 768px) {
    margin-bottom: 15px;
    :deep(.el-radio-button__inner) {
      font-size: 13px;
      padding: 8px 12px;
    }
  }
}

// 添加动画关键帧
@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

@keyframes pulsate {
  0% {
    opacity: 0.8;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

@keyframes shine {
  0% {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.5);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
}
</style>
